<template>
  <div class="home">
    <van-nav-bar
      fixed
      placeholder
      style="background-color: #f1f1f1; margin-bottom: 50px"
    >
      <template #left>
        <van-icon name="bars" size="24" color="#000" @click="moreMsg" />
      </template>
      <template #right>
        <van-icon name="search" size="24" color="#000" />
      </template>
    </van-nav-bar>
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '70%' }"
    >
      <div class="box">
        <div class="avatar">
          <img :src="person.avatarUrl" alt="" />
        </div>
        <div class="username">{{ person.nickname }}</div>
        <div class="lv">LV:{{ person.level }}</div>
        <div class="time">
          您于{{
            new Date(person.createTime).getFullYear()
          }}年来到云村，至今已{{ person.createDays }}天
        </div>
        <van-button round type="danger" @click="outLine">退出登录</van-button>
      </div>
    </van-popup>

    <div class="login center">
      <div class="notLogin" v-show="!hasLogin" @click="toLogin">
        <div class="pic">
          <van-icon
            name="contact"
            size="45"
            color="pink"
            style="display: block; margin-top: 10px"
          />
        </div>
        <p>立即登录<van-icon name="arrow" size="12" /></p>
      </div>
      <div class="loginIn" v-show="hasLogin">
        <div class="pic">
          <img :src="person.avatarUrl" />
        </div>
        <p>{{ person.nickname }}</p>
      </div>
    </div>
    <main>
      <ul>
        <li @click="toLately">
          <p><van-icon name="play-circle" size="30" /></p>
          <p>最近播放</p>
        </li>
        <li @click="toLocal">
          <p><van-icon name="descending" size="30" /></p>
          <p>本地下载</p>
        </li>
        <li @click="toCloud">
          <p><van-icon name="ascending" size="30" /></p>
          <p>云盘</p>
        </li>
        <li @click="toShop">
          <p><van-icon name="bag" size="30" /></p>
          <p>已购</p>
        </li>
        <li @click="toFriend">
          <p><van-icon name="friends" size="30" /></p>
          <p>我的好友</p>
        </li>
        <li @click="toLike">
          <p><van-icon name="star" size="30" /></p>
          <p>收藏和赞</p>
        </li>
        <li @click="toRadio">
          <p><van-icon name="weapp-nav" size="30" /></p>
          <p>我的播客</p>
        </li>
        <li @click="toMusic">
          <p><van-icon name="gift-card" size="30" /></p>
          <p>音乐罐子</p>
        </li>
        <!-- <h4>99%契合你品味的直播</h4> -->
      </ul>
    </main>
    <div class="myLike center" @click="toLove">
      <div class="left">
        <van-icon name="like" />
      </div>
      <div class="middle">
        <p>我喜欢的音乐</p>
        <p v-show="LoveNum">{{ LoveNum }}首</p>
      </div>
      <div class="right">
        <van-icon name="fire-o" color="red" />
        心动模式
      </div>
    </div>
    <div class="songsheet center">
      <p class="left">创建歌单</p>
      <ul v-show="MySongList.length">
        <li
          v-for="item in MySongList"
          :key="item.id"
          @click="$router.push('/songlistdetails/' + item.id)"
        >
          <div class="imgs">
            <img :src="item.coverImgUrl" alt="" />
          </div>
          <div class="text">{{ item.name }}</div>
        </li>
      </ul>
      <div @click="toOut">
        <div class="icon">
          <van-icon name="guide-o" />
        </div>
        <p class="txt">一键导入外部音乐</p>
      </div>
    </div>
    <div class="collection center" @click="toCollection">
      <p class="left">收藏歌单</p>
      <p class="txt" v-show="!MyCollectionList.length">暂无收藏的歌单</p>
      <ul v-show="MyCollectionList.length">
        <li
          v-for="item in MyCollectionList"
          :key="item.id"
          @click="$router.push('/songlistdetails/' + item.id)"
        >
          <div class="imgs">
            <img :src="item.coverImgUrl" alt="" />
          </div>
          <div class="text">{{ item.name }}</div>
        </li>
      </ul>
    </div>
    <transition name="fade">
      <div class="recommend" v-show="recommendState">
        <h4>
          <p>推荐歌单</p>
          <van-icon name="close" @click="recommendState = false" />
        </h4>
        <ul class="songBody" style="overflow: hidden">
          <li
            style="height: 163px"
            v-for="item in hostList"
            :key="item.id"
            @click="toSongList(item.id)"
          >
            <div class="image">
              <img :src="item.picUrl" alt="" />
              <p>
                <van-icon name="play" />{{ parseInt(item.playCount / 10000) }}万
              </p>
            </div>
            <p class="txt">{{ item.name }}</p>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
import { Toast } from "vant";
import { getSongList, getLogin } from "../../api/HomeInterface.js";
import axios from "axios";
import { removeToken, removeSong, removeSg } from "../../utils/auth";

export default {
  data() {
    return {
      show: false,
      hostList: [],
      recommendState: true,
      hasLogin: false,
      person: {},
      LoveNum: "",
      LoveId: "",
      MySongList: [],
      MyCollectionList: [],
    };
  },
  computed: {
    param() {
      return `cookie=${localStorage.getItem(
        "cookie"
      )}&timestamp=${new Date().getTime()}`;
    },
  },
  watch: {},

  methods: {
    async getLogin() {
      if (localStorage.getItem("cookie")) {
        this.hasLogin = true;
      } else {
        return false;
      }
      const res = await axios.get(
        "http://192.168.31.27:3000/login/status?" + this.param,
        {
          // const res = await axios.get(
          //   "http://192.168.31.27:3000/user/subcount?cookie=" +
          //     localStorage.getItem("cookie") +
          //     "&timestamp=" +
          //     new Date().getTime(),
          //   {
          withCredentials: true,
        }
      );
      // console.log(res);
      this.person.id = res.data.data.account.id;
      this.person.nickname = res.data.data.profile.nickname;
      this.person.backgroundUrl = res.data.data.profile.backgroundUrl;
      this.person.avatarUrl = res.data.data.profile.avatarUrl;
      this.person.createTime = res.data.data.profile.createTime;

      const res2 = await axios.get(
        `http://192.168.31.27:3000/user/detail?uid=${this.person.id}&${this.param} `,
        {
          withCredentials: true,
        }
      );
      // console.log("res2", res2);
      this.person.level = res2.data.level;
      this.person.createDays = res2.data.createDays;
      this.person.listenSongs = res2.data.listenSongs;

      const res3 = await axios.get(
        `http://192.168.31.27:3000/user/playlist?uid=${this.person.id}&${this.param} `,
        {
          withCredentials: true,
        }
      );
      // console.log("res3", res3);
      this.person.playlist = res3.data.playlist;

      (this.MyCollectionList = []),
        (this.MySongList = []),
        this.person.playlist.forEach((item, index) => {
          if (index && item.subscribed) {
            this.MyCollectionList.push(item);
          } else if (index) {
            this.MySongList.push(item);
          }
        });
      this.getMyLoveNum();
      // console.log(this.person);
      // console.log(this.MySongList);
      // console.log(this.MyCollectionList);
    },
    async getMyLoveNum() {
      const res = await axios.get(
        `http://192.168.31.27:3000/playlist/detail?id=
          ${this.person.playlist[0].id}&${this.param}`,
        {
          withCredentials: true,
        }
      );
      // console.log(111, res);
      this.LoveNum = res.data.privileges.length;
      this.LoveId = this.person.playlist[0].id;
    },
    async getRecommend(data) {
      const res = await axios.get(
        "http://192.168.31.27:3000/personalized?limit=" +
          data +
          "&timestamp=" +
          new Date().getTime(),
        {
          withCredentials: true,
        }
      );
      this.hostList = res.data.result;
      // console.log(this.hostList);
    },
    toLogin() {
      let notLogin = document.querySelector(".notLogin");
      // console.log(notLogin);
      notLogin.style.backgroundColor = "#cecece";
      setTimeout(() => {
        this.$router.push("/login");
      }, 200);
    },
    toLately() {
      this.$router.push("/recentlyplayed");
    },
    toLocal() {
      this.$router.push("/localdownload");
    },
    toSongList(id) {
      // console.log(id);
      this.$router.push("/songlistdetails/" + id);
    },
    noLogin() {
      if (!this.hasLogin) {
        this.$router.push("/login");
      }
    },
    moreMsg() {
      this.noLogin();
      this.show = true;
    },
    toCloud() {
      this.noLogin();
    },
    toShop() {
      this.noLogin();
    },
    toFriend() {
      this.noLogin();
    },
    toLike() {
      this.noLogin();
    },
    toRadio() {
      this.noLogin();
    },
    toMusic() {
      this.noLogin();
    },
    toLove() {
      this.noLogin();
      // this.$router.push("/songlistdetails/" + this.LoveId);
    },
    toOut() {
      this.noLogin();
    },
    toCollection() {
      this.noLogin();
    },
    outLine() {
      localStorage.removeItem("cookie");
      removeToken(), removeSong(), removeSg();
      this.$router.push("/login");
    },
  },
  created() {
    this.getLogin();
    this.getRecommend(6);
  },
  mounted() {
    let odiv = document.querySelector(".van-nav-bar__content");
    odiv.style.backgroundColor = "#f1f1f1";
  },
  components: {},
};
</script>
<style scoped>
.center {
  width: 90%;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 20px;
}
.home {
  background-color: #f1f1f1;
  padding-bottom: 130px;
}
.login {
  height: 80px;
  position: relative;
  margin-bottom: 20px;
}
.notLogin {
  height: 80px;
  text-align: center;
  overflow: hidden;
  border-radius: 20px;
  transition: 0.3s;
}
.notLogin p {
  font-size: 18px;
  font-weight: 500;
  line-height: 18px;
  margin-top: 45px;
}
.loginIn {
  height: 100%;
  overflow: hidden;
  text-align: center;
}
.pic {
  position: absolute;
  top: -30px;
  left: calc(50% - 30px);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgb(250, 244, 246);
}
.loginIn .pic {
  width: 80px;
  height: 80px;
  left: calc(50% - 40px);
  top: -50px;
}
.loginIn .pic img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.loginIn p {
  margin-top: 45px;
  font-size: 18px;
  color: darkred;
  text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
    -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606,
    0 -80px 70px #973716, 10px -90px 80px #451b0e;
}
main {
  width: 90%;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 20px;
  padding: 10px 0;
  font-size: 12px;
  color: rgb(209, 36, 36);
  margin-bottom: 20px;
}
main ul {
  overflow: hidden;
  text-align: center;
}
main ul li {
  width: 25%;
  float: left;
  margin-top: 10px;
}
main ul li p:nth-of-type(2) {
  margin: 10px 0;
  color: rgb(92, 91, 91);
}
.myLike {
  height: 80px;
  overflow: hidden;
  margin-bottom: 20px;
}
.myLike .left {
  float: left;
  width: 60px;
  height: 60px;
  margin: 10px;
  text-align: center;
  line-height: 60px;
  font-size: 30px;
  color: #fff;
  background-color: #ccc;
  border-radius: 10px;
}
.myLike .middle {
  float: left;
}
.myLike .middle p {
  line-height: 40px;
  height: 40px;
}
.myLike .middle p:nth-of-type(2) {
  font-size: 14px;
  color: #ccc;
}
.myLike .right {
  float: right;
  font-size: 12px;
  padding: 3px 5px;
  margin-top: 28px;
  margin-right: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  color: rgba(0, 0, 0, 0.7);
}
.songsheet {
  /* height: 120px; */
  margin-bottom: 20px;
  overflow: hidden;
  padding-bottom: 10px;
}
.songsheet > .left {
  color: #ccc;
  font-size: 14px;
  padding: 15px;
  margin: 0;
}
.songsheet li {
  margin: 15px 0;
  margin-left: 15px;
  overflow: hidden;
  display: flex;
}
.songsheet li .imgs {
  display: block;
  border: none;
  float: left;
}
.songsheet li .imgs img {
  width: 60px;
  height: 60px;
}
.songsheet li .text {
  float: left;
  width: 255px;
  margin-left: 20px;
  line-height: 60px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.songsheet .icon {
  width: 60px;
  height: 60px;
  background-color: #f1f1f1;
  border-radius: 10px;
  margin-left: 10px;
  line-height: 60px;
  text-align: center;
  font-size: 30px;
  color: rgba(0, 0, 0, 0.3);
  float: left;
}
.songsheet .txt {
  float: left;
  margin: 0 15px;
  font-size: 14px;
  line-height: 60px;
}
.collection {
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.collection > .left {
  color: #ccc;
  font-size: 14px;
  padding: 15px;
  margin: 0;
}
.collection .txt {
  width: 120px;
  margin: 10px auto;
  font-size: 14px;
  color: #0009;
}
.collection li {
  margin: 15px 0;
  margin-left: 15px;
  overflow: hidden;
  display: flex;
}
.collection li .imgs {
  display: block;
  border: none;
  float: left;
}
.collection li .imgs img {
  width: 60px;
  height: 60px;
}
.collection li .text {
  float: left;
  width: 255px;
  margin-left: 20px;
  line-height: 60px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.recommend {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
}
.recommend p {
  font-weight: 500;
  float: left;
}
.recommend h4 {
  margin: 10px 0;
  overflow: hidden;
}
.recommend h4 p {
  height: 48px;
  line-height: 48px;
}
.recommend i {
  float: right;
  margin: 16px 0;
  background-color: #eeeded;
  border-radius: 50%;
}
.songBody li {
  width: 30%;
  float: left;
  margin-right: 5%;
}
.songBody li:nth-of-type(3n) {
  margin-right: 0;
}
.songBody li .image {
  position: relative;
}
.songBody li .image img {
  width: 100%;
  border-radius: 10px;
}
.songBody li .image p {
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  margin: 0;
  font-size: 12px;
  color: #fff;
  border-radius: 100px;
  background-color: hsl(0, 0%, 95%, 0.4);
  position: absolute;
  right: 0;
  top: 0;
}
.songBody li .image p i {
  margin-top: 3px;
  float: left;
  background-color: transparent;
}
.songBody .txt {
  width: 100%;
  font-size: 14px;
  font-weight: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #0009;
  height: 50px;
  line-height: 50px;
}
/* 动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.box {
  padding: 30px;
  font-size: 22px;
}
.box img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.box .username,
.box .lv,
.box .time,
.box .van-button {
  margin-top: 50px;
  line-height: 1.5;
  float: left;
  overflow: hidden;
}
.box .username {
  margin-right: 20px;
}
.box .van-button {
  width: 200px;
  height: 60px;
  font-size: 20px;
}
</style>
